<template>
	<div class="workflow-drawer-node">
		<el-tabs type="border-card" v-model="state.tabsActive">
			<!-- 节点编辑 -->
			<el-tab-pane label="节点编辑" name="1">
				<el-scrollbar>
					<el-form
						:model="state.node"
						:rules="state.nodeRules"
						ref="nodeFormRef"
						size="default"
						label-width="80px"
						class="pt15 pr15 pb15 pl15"
					>
						<el-form-item label="数据id" prop="id">
							<el-input
								v-model="state.node.id"
								placeholder="请输入数据id"
								clearable
							></el-input>
						</el-form-item>
						<el-form-item label="节点id" prop="nodeId">
							<el-input
								v-model="state.node.nodeId"
								placeholder="请输入节点id"
								clearable
							></el-input>
						</el-form-item>
						<el-form-item label="类型" prop="type">
							<el-input
								v-model="state.node.type"
								placeholder="请输入类型"
								clearable
							></el-input>
						</el-form-item>
						<el-form-item label="left坐标" prop="left">
							<el-input
								v-model="state.node.left"
								placeholder="请输入left坐标"
								clearable
							></el-input>
						</el-form-item>
						<el-form-item label="top坐标" prop="top">
							<el-input
								v-model="state.node.top"
								placeholder="请输入top坐标"
								clearable
							></el-input>
						</el-form-item>
						<el-form-item label="icon图标" prop="icon">
							<el-input
								v-model="state.node.icon"
								placeholder="请输入icon图标"
								clearable
							></el-input>
						</el-form-item>
						<el-form-item label="名称" prop="name">
							<el-input
								v-model="state.node.name"
								placeholder="请输入名称"
								clearable
							></el-input>
						</el-form-item>
						<el-form-item>
							<el-button class="mb15" @click="onNodeRefresh">
								<zk-icon name="RefreshRight" />
								重置
							</el-button>
							<el-button
								type="primary"
								class="mb15"
								@click="onNodeSubmit"
							>
								<zk-icon name="Check" />
								保存
							</el-button>
						</el-form-item>
					</el-form>
				</el-scrollbar>
			</el-tab-pane>

			<!-- 扩展表单 -->
			<el-tab-pane label="扩展表单" name="2">
				<el-scrollbar>
					<el-form
						:model="state.form"
						ref="extendFormRef"
						size="default"
						label-width="80px"
						class="pt15 pr15 pb15 pl15"
					>
						<el-form-item
							:label="val.label"
							:prop="val.prop"
							v-for="(val, key) in state.node.from"
							:key="key"
							:rules="[
								{
									required: val.required,
									message: `${val.label}不能为空`,
									trigger: 'blur',
								},
							]"
						>
							<el-input
								v-model="state.form[val.prop]"
								:placeholder="val.placeholder"
								clearable
								v-if="val.type === 'input'"
								:disabled="val.disabled"
							></el-input>
							<el-select
								v-model="state.form[val.prop]"
								placeholder="请选择"
								v-if="val.type === 'select'"
								clearable
								:disabled="val.disabled"
							>
								<el-option
									v-for="item in val.options"
									:key="item.value"
									:label="item.label"
									:value="item.value"
								>
								</el-option>
							</el-select>
							<el-checkbox-group
								v-model="state.form[val.prop]"
								v-if="val.type === 'checkbox'"
								:disabled="val.disabled"
							>
								<el-checkbox label="美食推荐" name="type"></el-checkbox>
								<el-checkbox label="统计分析" name="type"></el-checkbox>
							</el-checkbox-group>
						</el-form-item>
						<el-form-item>
							<el-button class="mb15" @click="onExtendRefresh">
								<zk-icon name="RefreshRight" />
								重置
							</el-button>
							<el-button
								type="primary"
								class="mb15"
								@click="onExtendSubmit"
								:loading="state.loading.extend"
							>
								<zk-icon name="Check" />
								保存
							</el-button>
						</el-form-item>
					</el-form>
				</el-scrollbar>
			</el-tab-pane>

			<!-- 图表可视化 -->
			<el-tab-pane label="图表可视化" name="3">
				<el-scrollbar>
					<div class="flex-content-right">
						<div
							style="width: 320px; height: 200px"
							ref="chartsMonitorRef"
						></div>
					</div>
				</el-scrollbar>
			</el-tab-pane>
		</el-tabs>
	</div>
</template>

<script setup lang="ts" name="pagesWorkflowDrawerNode">
import { reactive, ref, nextTick } from "vue";
import { ElMessage } from "element-plus";
import * as echarts from "echarts";
type WorkflowDrawerNodeState<T = any> = {
	node: { [key: string]: T };
	nodeRules: T;
	form: T;
	tabsActive: string;
	loading: {
		extend: boolean;
	};
};
// 定义子组件向父组件传值/事件
const emit = defineEmits(["submit", "close"]);

// 定义变量内容
const nodeFormRef = ref();
const extendFormRef = ref();
const chartsMonitorRef = ref();
const state = reactive<WorkflowDrawerNodeState>({
	node: {},
	nodeRules: {
		id: [{ required: true, message: "请输入数据id", trigger: "blur" }],
		nodeId: [{ required: true, message: "请输入节点id", trigger: "blur" }],
		type: [{ required: true, message: "请输入类型", trigger: "blur" }],
		left: [{ required: true, message: "请输入left坐标", trigger: "blur" }],
		top: [{ required: true, message: "请输入top坐标", trigger: "blur" }],
		icon: [{ required: true, message: "请输入icon图标", trigger: "blur" }],
		name: [{ required: true, message: "请输入名称", trigger: "blur" }],
	},
	form: {
		module: [],
	},
	tabsActive: "1",
	loading: {
		extend: false,
	},
});

// 获取父组件数据
const getParentData = (data: object) => {
	state.tabsActive = "1";
	state.node = data;
	initChartsMonitor();
};
// 节点编辑-重置
const onNodeRefresh = () => {
	state.node.icon = "";
	state.node.name = "";
};
// 节点编辑-保存
const onNodeSubmit = () => {
	nodeFormRef.value.validate((valid: boolean) => {
		if (valid) {
			emit("submit", state.node);
			emit("close");
		} else {
			return false;
		}
	});
};
// 扩展表单-重置
const onExtendRefresh = () => {
	extendFormRef.value.resetFields();
};
// 扩展表单-保存
const onExtendSubmit = () => {
	extendFormRef.value.validate((valid: boolean) => {
		if (valid) {
			state.loading.extend = true;
			setTimeout(() => {
				state.loading.extend = false;
				ElMessage.success("保存成功");
				emit("close");
			}, 1000);
		} else {
			return false;
		}
	});
};
// 图表可视化-初始化
const initChartsMonitor = () => {
	const myChart = echarts.init(chartsMonitorRef.value);
	const numsOne = [];
	const numsTwo = [];
	for (let i = 0; i < 7; i++) {
		numsOne.push(
			`${Math.floor(Math.random() * 52 + 10)}:${Math.floor(
				Math.random() * 52 + 1
			)}`
		);
		numsTwo.push(Math.floor(Math.random() * 52 + 1));
	}
	const option = {
		grid: {
			top: 50,
			right: 30,
			bottom: 30,
			left: 50,
		},
		tooltip: {
			trigger: "axis",
		},
		xAxis: {
			type: "category",
			boundaryGap: false,
			data: numsOne,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				itemStyle: {
					color: "#289df5",
					borderColor: "#289df5",
					areaStyle: {
						type: "default",
						opacity: 0.1,
					},
				},
				data: numsTwo,
				type: "line",
				areaStyle: {},
			},
		],
	};
	myChart.setOption(option);
	nextTick(() => {
		myChart.resize();
	});
};

// 暴露变量
defineExpose({
	getParentData,
});
</script>

<style scoped lang="scss">
.workflow-drawer-node {
	:deep() {
		.el-tabs {
			border: unset;
			box-shadow: unset;

			.el-tabs__nav {
				display: flex;
				width: 100%;

				.el-tabs__item {
					flex: 1;
					padding: unset;
					text-align: center;

					&:first-of-type.is-active {
						border-left-color: transparent;
					}

					&:last-of-type.is-active {
						border-right-color: transparent;
					}
				}
			}

			.el-tabs__content {
				padding: 0;
				height: calc(100vh - 90px);

				.el-tab-pane {
					height: 100%;
				}
			}
		}
	}
}
</style>
